:root {
    /* --table-bg:linear-gradient(90de, rgb(149, 97, 184) 0%, rgb(248, 118, 118) 50%, rgb(243, 197, 133) 100%); */
    --table-bg: linear-gradient(90deg, #cb81fc 0%, rgb(252, 162, 162) 50%, rgb(252, 214, 161) 100%);
    --webapp-anchor: #cb81fc;
}

table[class|=webapp] {
    width: 100%;
    border: 2px solid var(--color-border);
}

table[class|=webapp]>thead>tr:first-child {
    background: var(--table-bg);
    height: 3rem;
    font-size: var(--txt-normal);
}

table[class|=webapp]>tfoot>tr:first-child>td:first-child>a {
    min-width: 4rem;
    margin-bottom: .4rem;
}

table[class|=webapp]>tfoot>tr:first-child>td:last-child>input[type=number] {
    float: left;
    margin-right: 1rem;
}

div.webapp-bar.merge {
    height: 3rem;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 1rem;
}

div.webapp-bar.merge>div.selectcount {
    font-size: var(--txt-big)
}

div.webapp-bar.merge>div.selectcount>font.count {
    color: var(--color-primary);
    font-weight: bold;
    margin: 0 5px;
}

div.webapp-bar.merge>form>select {
    width: 100%;
    height: 2.5rem;
    min-width: 15rem;
    background: var(--table-bg);
    border: none;
    border-radius: var(--border-radius);
    padding: 0 .4rem;
    color: white;
}

div.webapp-bar.merge>form>select>option {
    color: black;
    background-color: antiquewhite;
}

table[class|=webapp]>tbody>tr {
    height: 2.5rem;
    border-bottom: 1px solid var(--color-border);
}

table[class|=webapp]>tbody>tr.fieldset>td.selectall {
    text-align: center;
    padding-top: .8rem;
}

table[class|=webapp]>tbody>tr.selected {
    background-color: antiquewhite;
}

table[class|=webapp]>tbody>tr>td {
    border: none;
}

table[class|=webapp]>tbody>tr>td.taskexec {
    display: flex;
    justify-content: start;
    gap: .4rem;
    min-width: 10rem;
    gap: 1rem;
}

table[class|=webapp]>tbody>tr>td.taskexec>a {
    font-weight: bold;
}

table[class|=webapp]>tbody>tr>td.taskexec>a::before {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: .8rem;
}

table[class|=webapp]>tbody>tr>td.taskexec>a.success::before {
    content: '✅';
}

table[class|=webapp]>tbody>tr>td.taskexec>a.running::before {
    content: '🔄';
}

table[class|=webapp]>tbody>tr>td.taskexec>a.pending::before {
    content: '⏳';
}

table[class|=webapp]>tbody>tr>td.taskexec>a.failed::before {
    content: '❌';
}

table[class|=webapp]>tbody>tr>td.active,
table[class|=webapp]>tbody>tr>td.normal,
table[class|=webapp]>tbody>tr>td.running {
    color: green;
}

table[class|=webapp]>tbody>tr>td.completed,
table[class|=webapp]>tbody>tr>td.success {
    color: blue;
}

table[class|=webapp]>tbody>tr>td.disabled,
table[class|=webapp]>tbody>tr>td.failed {
    color: red;
}

table[class|=webapp]>tbody>tr>td.abnormal,
table[class|=webapp]>tbody>tr>td.timeout {
    color: orange
}

table[class|=webapp]>tbody>tr>td.relogin,
table[class|=webapp]>tbody>tr>td.notfound,
table[class|=webapp]>tbody>tr>td.nocomment {
    color: rgb(108, 191, 197);
}

table[class|=webapp]>tbody>tr>td:last-child,
table[class|=webapp]>tbody>tr>td:first-child {
    text-align: center;
    min-width: 3rem;
    display: flex;
    justify-content: center;
}

table[class|=webapp]>tbody>tr>td:first-child>input[type=checkbox] {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: .8rem;
}


table[class|=webapp]>tbody>tr>td.spans {
    display: flex;
    justify-content: start;
    gap: var(--gap);
    flex-wrap: wrap;
    max-width: 50%;
    min-width: 8rem;
}

table[class|=webapp]>tbody>tr>td.spans>span {
    background-color: #cb81fc;
    padding: .2rem .5rem;
    border-radius: .4rem;
    color: white;
}

table[class|=webapp]>tbody>tr>td.spans>span:empty {
    display: none;
}

table[class|=webapp]>tbody>tr>td.actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

table[class|=webapp]>tbody>tr>td>img.icon {
    width: 1.6rem;
    height: 1.6rem;
    margin: 0 auto;
}

table[class|=webapp]>tbody>tr>td>img.bicon {
    width: 2.4rem;
    height: 2.4rem;
    margin: 0 auto;
}


table[class|=webapp]>tfoot>tr>td>a {
    width: 3rem;
    float: left;
    margin-right: 1rem;
    border-radius: .4rem;
    text-align: center;

}


button.tbbtn {
    background-image: var(--table-bg) !important;

    font-size: var(--txt-normal) !important;
    line-height: 2rem !important;
    padding: 0.3rem 2rem !important;
    text-align: center;
    text-transform: uppercase;
    transition: var(--transition);
    background-size: 200% auto;
    color: white !important;
    box-shadow: 0 0 20px #eee;
    border-radius: var(--border-radius);
    display: block;
    border: none;
    max-height: 3rem;
}

button.tbbtn:hover {
    background-position: right center;
    /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

table[class|=webapp]>tbody>tr.fieldset {
    height: 3rem;
    color: white;
    background: var(--table-bg);
    font-weight: bold;
}



form[class|=webapp]>fieldset>legend {
    margin: 1rem 0;
    font-size: var(--txt-big);
}

form[class|=webapp]>fieldset>input,
form[class|=webapp]>fieldset>select {
    height: 2.5rem;
    min-width: 15rem;
    width: 100%;
    border-radius: .4rem;
}

form[class|=webapp]>fieldset>textarea {
    min-width: 15rem;
    width: 100%;
    border-radius: .4rem;
}

form[class|=webapp]>fieldset>ul {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
}

form[class|=webapp]>fieldset>ul>li>label {
    display: flex;
    justify-content: start;
    gap: .5rem;
    height: 3rem;
    align-items: center;
    margin-right: 1rem;
}

form[class|=webapp]>fieldset>ul>li>label>input[type=checkbox],
form[class|=webapp]>fieldset>ul>li>label>input[type=radio] {
    width: 1.2rem;
    height: 1.2rem;
}


form[class|=webapp] {
    display: inline-flex;
    gap: 1rem;
    flex-direction: column;
    min-width: 43rem;
}

form[name=search] {
    flex-direction: row;
    width: 100%;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

form[name=search]>fieldset>input[type=number] {
    max-width: 10rem;
    min-width: 5rem;
}

form[name=loginform] {
    margin: 0 auto;
    align-self: center;
    display: flex;
    width: 30rem;
    max-width: 100%;
    min-width: 20rem !important;
    justify-content: center;
    gap: 1rem;
    margin-top: 5rem;
    padding: 2rem;

    border-radius: .6rem;
    /* box-shadow: 0 0 20px #d10da0; */
    /* box-shadow:10px -11px 4px -3px #f98b56; */
    box-shadow: rgba(240, 46, 170, 0.4) -5px 5px,
        rgba(240, 46, 170, 0.3) -10px 10px,
        rgba(240, 46, 170, 0.2) -15px 15px,
        rgba(240, 46, 170, 0.1) -20px 20px,
        rgba(240, 46, 170, 0.05) -25px 25px;

    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
}

form[name=loginform]>fieldset>button {
    background: linear-gradient(90deg, rgb(137, 84, 172) 0%, rgb(248, 58, 58) 50%, rgb(250, 189, 103) 100%);
    border: none;
    width: 10rem;
    height: 3em;
    color: white;
}

form[name=loginform]>fieldset>button:hover {
    background-position: right center;
    text-decoration: none;
    cursor: pointer;
    background: #833AB4;
    background: linear-gradient(270deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
}




body[name=login] {
    background: linear-gradient(90deg, rgb(137, 84, 172) 0%, rgb(248, 58, 58) 50%, rgb(250, 189, 103) 100%);
}

@media (max-width: 768px) {

    header,
    main,
    footer {
        width: 80%;
        margin: 0 auto !important;
    }

    form[name=loginform] {
        width: auto;
    }
}